<template>
  <div class="login">
    <el-card class="box-card">
      <!-- <img
        class="img_logo"
        src="../../assets/logo.png"
        alt=""
      > -->
      <!-- 绘制表单 -->
      <el-form
        ref="ruleForm"
        :model="info"
        :rules="rules"
        status-icon
      >
        <el-form-item prop="mobile">
          <el-input
            v-model="info.mobile"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="info.code"
            style="width:240px;margin-right:8px"
            placeholder="请输入验证码"
          ></el-input>
          <el-button>发送验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="chackbox_center">已阅读并同意协议</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="login_click(info)"
            style="width:100%"
            type="primary"
          >
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import auth from "@/utils/auth";
export default {
  name: "Login_page",
  data() {
    // 声明校验规则callback
    const chekMobile = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error("手机号不错误"));
      } else {
        return callback();
      }
    };
    return {
      chackbox_center: true,
      info: {
        mobile: "13911111111",
        code: "246810"
      },
      // 表单校验
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: chekMobile, trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { len: 6, message: "验证码长度6位", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.$http
      .post("/authorizations ", {
        mobile: "13011111111",
        code: "246810"
      })
      .then(res => {
        console.log("zhuce", res);
      });
  },
  methods: {
    login_click(info) {
      // console.log("dian", info);
      console.log("this.$refs.ruleForm.validate", this.$refs.ruleForm.validate);

      this.$refs.ruleForm.validate(async valid => {
        // console.log("valid", valid);
        if (valid) {
          // this.$http
          //   .post("authorizations", this.info)
          //   .then(res => {
          //     console.log('res',res);
          //     auth.setUser(res.data.data);
          //     this.$router.push("/");
          //     console.log(res.data.data);
          //   })
          //   .catch((e) => {
          //    console.log(e)
          //     this.$message.error("手机号或验证码错误");
          //   });
          try {
            const res = await this.$http.post("authorizations", this.info);
            console.log(res);
            auth.setUser(res.data.data);
            this.$router.push("/");
          } catch (e) {
            this.$message.error("手机号或验证码错误");
          }
        }
      });
    }
  }
};
</script>


<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background: url(../../assets/login_bg.jpg) no-repeat center / cover;
  position: absolute;
  left: 0;
  top: 0;
}
.el-card {
  width: 400px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.img_logo {
  width: 200px;
  display: block;
  margin: 0 auto 20px;
}
</style>